<template>
<div class="list-wrap">
    <el-tabs v-model="activeName" @tab-click="switchActive" type="card">
        <el-tab-pane label="运营中" name="Normal">
            <el-table :data="NormalTableData" stripe style="width: 95%">
                <el-table-column prop="id" label="id" width="50"></el-table-column>
                <el-table-column prop="avatar" label="头像" width="91">
                    <template slot-scope="scope">
                        <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                        <el-avatar v-else>{{scope.row.title}}</el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="店铺名称" width="160"></el-table-column>
                <el-table-column prop="vip" label="店铺类型" width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.vip == 1">VIP店铺</span>
                        <span v-else>免费店铺</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand" @click.native="getChild(scope.row)" trigger="click">
                            <span class="el-dropdown-link">
                                <el-link v-if="scope.row.status === 'Rest'" type="info">休息中</el-link>
                                <el-link v-if="scope.row.status === 'Normal'" type="success">运营中</el-link>
                                <el-link v-if="scope.row.status === 'Ban'" type="danger">封禁中</el-link>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="Rest">休息中</el-dropdown-item>
                                <el-dropdown-item command="Normal">运营中</el-dropdown-item>
                                <el-dropdown-item command="Ban">封禁中</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                        <router-link :to="{name:'management',params:{info:scope.row}}" style="text-decoration: none;color: #409EFF;">
                            <span>进入店铺</span> &nbsp;
                        </router-link>
                        <el-button v-if="scope.row.vip != 1" @click="eidtVip(scope.row,1)" type="text" size="small">升级VIP</el-button>
                        <el-button v-else @click="eidtVip(scope.row,0)" type="text" size="small">降级免费店铺</el-button>
                        <el-button @click="edit(scope.row)" type="text" size="small"> 修改</el-button>
                        <el-button @click="delete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <div class="q-pagination" slot="append">
                    <el-pagination background layout="prev, pager, next" :total="NormalTotal" @current-change="handlePageClick"></el-pagination>
                </div>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="休息中" name="Rest">
            <el-table :data="RestTableData" stripe style="width: 95%">
                <el-table-column prop="id" label="id" width="50"></el-table-column>
                <el-table-column prop="avatar" label="头像" width="91">
                    <template slot-scope="scope">
                        <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                        <el-avatar v-else>{{scope.row.title}}</el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="店铺名称" width="160"></el-table-column>
                <el-table-column prop="type" label="店铺类型" width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">VIP店铺</span>
                        <span v-else>免费店铺</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand" @click.native="getChild(scope.row)" trigger="click">
                            <span class="el-dropdown-link">
                                <el-link v-if="scope.row.status === 'Rest'" type="info">休息中</el-link>
                                <el-link v-if="scope.row.status === 'Normal'" type="success">运营中</el-link>
                                <el-link v-if="scope.row.status === 'Ban'" type="danger">封禁中</el-link>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="Rest">休息中</el-dropdown-item>
                                <el-dropdown-item command="Normal">运营中</el-dropdown-item>
                                <el-dropdown-item command="Ban">封禁中</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <router-link :to="{name:'management',params:{info:scope.row}}" style="text-decoration: none;color: #409EFF;">
                            <span>进入店铺</span> &nbsp;
                        </router-link>
                        <el-button v-if="scope.row.vip != 1" @click="eidtVip(scope.row,1)" type="text" size="small">升级VIP</el-button>
                        <el-button v-else @click="eidtVip(scope.row,0)" type="text" size="small">降级免费店铺</el-button>
                        <el-button @click="edit(scope.row)" type="text" size="small"> 修改</el-button>
                        <el-button @click="delete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <div class="q-pagination" slot="append">
                    <el-pagination background layout="prev, pager, next" :total="RestTotal" @current-change="handlePageClick"></el-pagination>
                </div>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="封禁" name="Ban">
            <el-table :data="BanTableData" stripe style="width: 95%">
                <el-table-column prop="id" label="id" width="50"></el-table-column>
                <el-table-column prop="avatar" label="头像" width="91">
                    <template slot-scope="scope">
                        <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                        <el-avatar v-else>{{scope.row.title}}</el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="店铺名称" width="160"></el-table-column>
                <el-table-column prop="type" label="店铺类型" width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">VIP店铺</span>
                        <span v-else>免费店铺</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand" @click.native="getChild(scope.row)" trigger="click">
                            <span class="el-dropdown-link">
                                <el-link v-if="scope.row.status === 'Rest'" type="info">休息中</el-link>
                                <el-link v-if="scope.row.status === 'Normal'" type="success">运营中</el-link>
                                <el-link v-if="scope.row.status === 'Ban'" type="danger">封禁中</el-link>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="Rest">休息中</el-dropdown-item>
                                <el-dropdown-item command="Normal">运营中</el-dropdown-item>
                                <el-dropdown-item command="Ban">封禁中</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <router-link :to="{name:'management',params:{info:scope.row}}" style="text-decoration: none;color: #409EFF;">
                            <span>进入店铺</span> &nbsp;
                        </router-link>
                        <el-button v-if="scope.row.vip != 1" @click="eidtVip(scope.row,1)" type="text" size="small">升级VIP</el-button>
                        <el-button v-else @click="eidtVip(scope.row,0)" type="text" size="small">降级免费店铺</el-button>
                        <el-button @click="edit(scope.row)" type="text" size="small"> 修改</el-button>
                        <el-button @click="delete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <div class="q-pagination" slot="append">
                    <el-pagination background layout="prev, pager, next" :total="BanTotal" @current-change="handlePageClick"></el-pagination>
                </div>
            </el-table>
        </el-tab-pane>
    </el-tabs>
    <el-dialog title="修改" :visible.sync="editPanelType" width="50%">
        <el-form ref="form" :model="editFrom" label-width="120px" size="mini">
            <el-form-item label="店铺名称">
                <el-input v-model="editFrom.title"></el-input>
            </el-form-item>
            <el-form-item label="店铺标识">
                <el-input v-model="editFrom.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="editFrom.realname"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="editFrom.mobile"></el-input>
            </el-form-item>
            <el-form-item label="店铺状态">
                <el-select v-model="editFrom.status" placeholder="请选择">
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="vip">
                <el-select v-model="editFrom.vip" filterable placeholder="请选择">
                    <el-option v-for="item in vip" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">确定修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
import axios from "axios";
export default {
    name: "List",
    data() {
        return {

            pageSize: 10,
            activeName: "Normal",
            editPanelType: false,
            editFrom: [],
            vip: [{
                value: 1,
                label: 'VIP店铺'
            }, {
                value: null,
                label: '免费店铺'
            }],
            status: [{
                value: 'Normal',
                label: '运营中'
            }, {
                value: 'Rest',
                label: '休息中'
            }, {
                value: 'Ban',
                label: '封禁中'
            }],
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶1'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            value1: '',
            NormalTableData: [],
            RestTableData: [],
            BanTableData: [],
            NormalTotal: 0,
            RestTotal: 0,
            BanTotal: 0,
            NormalCurrentPage: 1,
            RestCurrentPage: 1,
            BanCurrentPage: 1,

        };
    },
    mounted() {
        this.getStoreList();
    },
    methods: {
        async getStoreList(params = {}) {
            let _this = this;
            if (!params.status) {
                params.status = 'Normal'
            }
            params.pageSize = this.pageSize
            axios.get("/api/store/admin/store/list/", {
                    params
                })
                .then(result => {
                    switch (params.status) {
                        case 'Rest':
                            _this.RestTableData = result.data.data.data;
                            _this.RestTotal = result.data.data.total;
                            _this.RestCurrentPage = result.data.data.current_page;
                            break;
                        case 'Ban':
                            _this.BanTableData = result.data.data.data;
                            _this.BanTotal = result.data.data.total;
                            _this.BanCurrentPage = result.data.data.current_page;
                            break;
                        default:
                            this.NormalTableData = result.data.data.data;
                            this.NormalTotal = result.data.data.total;
                            this.NormalCurrentPage = result.data.data.current_page;
                            break;
                    }

                })
                .catch(_ => {
                    console.log(_);
                });
        },
        eidtVip(row, vip) {
            let params = {}
            params.vip = vip
            axios.post("/api/store/admin/store/edit_vip/" + row.id, params)
                .then(result => {
                    this.$message({
                        message: result.data.message,
                        type: 'success'
                    });
                    this.getStoreList();
                })
                .catch(_ => {
                    console.log(_);
                });
        },
        status(row, status) {
            let params = {}
            params.status = status
            axios.post("/api/store/admin/store/status/" + row.id, params)
                .then(result => {
                    this.$message({
                        message: result.data.message,
                        type: 'success'
                    });
                    this.getStoreList();
                })
                .catch(_ => {
                    console.log(_);
                });
        },
        switchActive(e) {
            this.activeName = e.name;
            let params = {
                pageSize: this.pageSize,
                status: this.activeName
            }
            this.getStoreList(params);
        },
        edit(e) {
            this.editPanelType = true;
            this.editFrom = e;
            console.log(this.editFrom);
        },
        delete(event) {
            axios.post("/api/store/admin/store/delete/" + event.id)
                .then(result => {
                    this.$message({
                        message: result.data.message,
                        type: 'success'
                    });
                    this.getStoreList({
                        status: this.activeName
                    });

                    this.editPanelType = false;
                })
                .catch(_ => {
                    console.log(_);
                });
        },
        submit(params = {}) {
            params = this.editFrom;
            axios.post("/api/store/admin/store/edit/" + params.id, params)
                .then(result => {
                    this.$message({
                        message: result.data.message,
                        type: 'success'
                    });
                    this.getStoreList({
                        status: this.activeName
                    });
                    this.editPanelType = false;
                })
                .catch(_ => {
                    console.log(_);
                });
        },
        handleCommand(command) {
            let params = {};
            params.status = command
            axios.post("/api/store/admin/store/status/" + this.editFrom.id, params)
                .then(result => {
                    this.$message({
                        message: result.data.message,
                        type: 'success'
                    });
                    this.getStoreList({
                        status: this.activeName
                    });

                })
                .catch(_ => {
                    console.log(_);
                });
            this.$message("click on item " + command);
        },
        getChild(e) {
            this.editFrom = e;
        },
        goStore(e) {
            this.storeSettingType = true;
            console.log(e)
        },
        handlePageClick(e) {
            let params = {
                pageSize: this.pageSize,
                page: e,
                status: this.activeName
            }
            this.getStoreList(params);
        }

    }
};
</script>

<style scoped>

</style>
